<template>
	<div class="page">
		<div class="search-view c-panel">
			<CFilterSearchView
				:data="searchData"
				@on-search="getWorks">
			</CFilterSearchView>
		</div>
		
		<div class="filter-view c-panel">
			<CWorksFilterView 
				:data="filterData"
				@on-item="selectFilter">
			</CWorksFilterView>
		</div>
		
		<div class="works-view c-panel">
			<CWorksGridView
				:data="data" 
				@on-sel-item="selectWorks"
				@on-click="clickItem">
			</CWorksGridView>
			<!--<Spin style="position: absolute; left: 0px;" v-if="loading">
	            <Icon type="load-c" size=18 class="c-icon-loading"></Icon>
	            <div>加载数据</div>
	        </Spin>-->
		</div>
		
		<div class="page-view">
			<Page 
				:total="data.totalsize" 
				:current="searchParams.page + 1"
				:page-size="searchParams.pagesize"
				:page-size-opts="[5, 10, 20, 30, 40]"
				@on-change="changePage"
				@on-page-size-change="changePageSize"
				show-sizer 
				show-total
				show-elevator
				placement="top">
			</Page>
		</div>
	</div>
</template>

<script>
	import CFilterSearchView from '@/components/CFilterSearchView';
	import CWorksFilterView from '@/pages/works/view/CWorksFilterView';
	import CWorksGridView from '@/pages/works/view/CWorksGridView';
	
	import WorksService from '@/services/WorksService.js';

	const $worksService = WorksService();
	
	export default {
		components: {
			CFilterSearchView, CWorksFilterView, CWorksGridView
		},
		data() {
			return {
				loading: false,
				worksFilterIndex: 0,
				filterData: [],
				data: {
					works: [],
					totalsize: 0,
					status: 0
				},
				searchData: {
					key: '',
					filters: []
				},
				searchParams: {
					page: 0,
					pagesize: 20,
					key: null,
					attribute: 0,
					type	: 0,
					area	: 0,
					year	: 0,
					duration	: 0,
					boxOffice: 0,
					episode: 0
				}
			};
		},
		methods: {
			selectFilter: function(item, items, index, lindex) {//筛选
				var $this = this;
				var data = $this.filterData;
				$this.searchParams.attribute = data[0].attributes[data[0].current].aid;
				$this.searchParams.type = data[1].labels[data[1].current].lid;
				$this.searchParams.area = data[2].labels[data[2].current].lid;
				$this.searchParams.year = data[3].labels[data[3].current].lid;
				$this.searchParams.duration = data[4].labels[data[4].current].lid;
				$this.searchParams.episodes = data[5].labels[data[5].current].lid;
				$this.searchParams.boxOffice = data[6].labels[data[6].current].lid;
				$this.getWorks($this.searchParams);
			},
			//选择作品
			changePage: function(val) {
				var $this = this;
				console.log($this.searchParams);
				$this.searchParams.page = val - 1;
				$this.getWorks($this.searchParams);
			},
			changePageSize: function(val) {
				var $this = this;
				$this.searchParams.pagesize = val;
				$this.getWorks($this.searchParams);
			},
			click2Search() {
				var $this = this;
				$this.getWorks($this.searchParams);
			},
			//选择作品
			selectWorks: function(data) {
				console.log(data);
				this.$router.push({name: 'worksDetail', query: {wid: data.wid}});
			},
			clickItem: function(item, index, btnIndex) {//单击
				if(btnIndex == 0) {
					this.$router.push({name: 'worksEdit', query: {wid: item.wid}});
				}
				console.log(item, index, btnIndex);
			},
		 	getWorks() {
		 		var $this = this;
		 		var params = $this.searchParams;
		 		$this.loading = true;
				$worksService.getWorks(params)
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) {
						var data = res.data;
						data.forEach(function(item, index, array) {
							var posterJson = item.poster;
							var poster;
							if(posterJson != null && posterJson != '') {
								var posterObj = eval('(' + posterJson + ')');
								poster = posterObj.url + "-works_poster";
							}
							item.poster = poster;
							item.types = item.types.join(" ");
						});
						$this.data.works = data;
						$this.data.totalsize = res.totalSize;
					}
					$this.loading = false;
				}, function(error) {
					console.log(error);
					$this.loading = false;
				});
			}
		},
		mounted() {
			var $this = this;
			$worksService.getWorksFilters()
			.then(function(response) {
				var res = response.data;
				var code = res.rescode;
				if(code == 100) {
					var data = res.data;
					$this.filterData = data;
					$this.filterData.forEach(function(item, index, array) {
						$this.filterData[index].current = 0;
						$this.filterData[index].isShow = true;
					});
					var obj = $this.filterData[0];
					console.log(obj);
					var attribute = obj.attributes[0];
					var hasBoxOffice = attribute.hasBoxOffice;
					var hasDuration = attribute.hasDuration;
					var hasEpisodes = attribute.hasEpisodes;
					
					$this.filterData[4].isShow = hasDuration == 1;
					$this.filterData[5].isShow = hasEpisodes == 1;
					$this.filterData[6].isShow = hasBoxOffice == 1;
					$this.searchParams.attribute = attribute.aid;
				}
			}, function(error) {
				console.log(error);
			});
			//加载作品
			$this.getWorks();
		}
	}
</script>

<style scoped>
	.page {
	}
	
	.search-view {
		margin-bottom: 10px;	
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
	}
	
	.filter-view {
		margin-bottom: 10px;
	}
	
	.works-view {
		margin-bottom: 80px;
		position: relative;
	}
	
	.page-view {
		text-align: center;
		position: fixed;
		background-color: #fff;
		padding: 15px 0;
		z-index: 999;
		bottom: 0;
		left: 200px;
		right: 0px;
	}
</style>